<template>
	<div class="recommend">
		<div class="title"><span>推荐歌单</span></div>
		<div class="recommendList">
			<div class="item" v-for="(item) in recommendList" :key="item.id" @click="toSheet(item.id)">
				<img :src="item.picUrl" mode="" />
				<div class="playcount">
					<i class="iconfont icon-icon-"></i>
					<span>{{item.playCount | formatcount}}</span>
				</div>
				<div class="info">
					{{item.name}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "recommendmusic",
		data() {
			return {

			};
		},
		methods:{
			toSheet(id){
				this.$router.push({path:"/musicsheet",query:{id:id}})
			}
		},
		props: {
			recommendList: {
				type:Array
			}
		},
		filters:{
			formatcount(val){
				
				if(val>10000){
					val = val/10000 
					val = Number(val).toFixed(2)
					return val+"万"
				}
				if(val>100000000){
					val = val/100000000
					val = Number(val).toFixed(2)
					return val+"亿"
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend{
		margin-top: 70px;
		.title{
			height: 60px;
			line-height: 60px;	
			padding: 0 10px;
			box-sizing: border-box;
			span{
				padding-right: 100px;
				padding-bottom: 10px;
				border-bottom: 2px solid #9917f7;
				font-size: 18px;
				font-weight: bold;
			}
		}
		.recommendList {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item {
				flex-basis: 30%;
				margin: 10px 2px;
				position: relative;
				img {
					width: 120px;
					height: 120px;
				}
				.playcount{
					position: absolute;
					top: 0;
					right: 0;
					color:#fff;
					font-size: 12px;
					background-color: rgba(176, 176, 176, 0.6);
					border-radius: 2em;
					padding:4px; 
					
				}
				.info{
					font-size: 12px;
				}
			}
		}
	}
</style>
